<template>
	<view>
		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
			@scrolltolower="lower" @scroll="scroll" :style="{height: scrollerHeight + 'px'}">
			<view class="scroll-view-item flex" v-for="(item, index) in listData" :key="index">
				<view class="info">
					<view class="title main-text-color font28"><text>{{item.title}}</text></view>
					<view class="timer">{{item.timer}}</view>
				</view>
				<view class="val font28">{{item.value}}</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props: {
			listData:{
				type: Array,
				default: () => {
					return []
				}
			},
			scrollerHeight: {
				type: [Number, String],
				default: 500
			},
			choose: {
				type: Boolean,
				dufault: false
			}
		},
		data () {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				}
			}
		},
		computed: {
			
		},
		methods: {
			upper: function(e) {
				// console.log(e)
			},
			lower: function(e) {
				// console.log(e)
			},
			scroll: function(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			chooseHandle(item) {
				this.choose && this.$emit('chooseHandle', item);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-Y {
		padding-top: 10rpx;
		padding-left: 24rpx;
	}
	.scroll-view-item {
		padding: 24rpx 30rpx;
		position: relative;
		background: #fff;
		border-bottom: 1px solid #EBEBEB;
		justify-content: space-between;
		align-items: center;
		
		&:last-child {
			border-bottom: none;
		}
		
		.info {
			
			.title {
				height: 40rpx;
				line-height: 40rpx;
				border-bottom: none;
				padding-left: 0;
			}
			.timer {
				font-size: 24rpx;
				line-height: 33rpx;
				color: #666;
				margin-top: 10rpx;
			}
		}
		.val {
			color: #FD5052;
		}
	}
</style>
